/*
* @Author: Rosen
* @Date:   2018-02-05 13:40:42
* @Last Modified by:   Rosen
* @Last Modified time: 2018-02-05 15:52:07
*/
import React        from 'react';
import MUtil        from 'util/mm.jsx'
import Order        from 'service/order-service.jsx'
import PageTitle    from 'component/page-title/index.jsx';
import TableList    from 'util/table-list/index.jsx';

import Expressage   from './expressage.jsx';
//订单详情夜
import './detail.scss';
const _mm           = new MUtil();
const _order        = new Order();
/*订单详情夜*/
class OrderDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            orderNumber : this.props.match.params.orderNumber,//标题URL的订单号
            orderInfo   : {},
            data  : ''
        }
    }
    componentDidMount(){
        this.loadOrderDetail();
    }
    // 加载商品详情
    loadOrderDetail(){
        _order.getOrderDetail(this.state.orderNumber).then((res) => {
            this.setState({
                orderInfo : res
            });
        }, (errMsg) => {
            _mm.errorTips(errMsg);
        });
    }
    // 发货操作
    onSendGoods(searchName, searchKeyword){
   let checkResult=this.checkLoginInfo(searchName,searchKeyword);
        if(checkResult.status){ //如果返回为真，
                if(window.confirm('是否确认该订单已经发货？')){
            _order.sendGoods(this.state.orderNumber,searchName,searchKeyword).then((res) => {
                _mm.successTips('发货成功');
                this.loadOrderDetail();
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
           }
        }
        // 验证不通过
        else{
            _mm.errorTips(checkResult.msg);
        }
    }


  // 检查发货时，
    checkLoginInfo(searchName,searchKeyword){
  let name = $.trim(searchName);
    let word = $.trim(searchKeyword);

      if(name=="请选择快递公司"){
          return {
                status: false,
                msg: '快递公司还没有选择！'
            }
      }
        // 判断为空
        if(word.length ===0){
            return {
                status: false,
                msg: '订单号不能为空！'
            }
        }
        // 判断密码为空
        if(/^[0-9]+\.?[0-9]+?$/.test(word)){
            return {
                status: true,
                msg: '验证通过'
            }
        }
        return {
            status : false,
            msg : '订单号全部应是数字！'
        }
    }

    render(){
        let receiverInfo = this.state.orderInfo.shippingVo      || {},
            productList  = this.state.orderInfo.orderItemVoList || [];

        let tableHeads = [
            {name: '商品图片', width: '10%'},
            {name: '商品信息', width: '45%'},
            {name: '单价', width: '15%'},
            {name: '数量', width: '15%'},
            {name: '合计', width: '15%'}
        ];
        return (
            <div id="page-wrapper">
                <PageTitle title="订单详情" />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单号</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">创建时间</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.createTime}</p>
                        </div>
                    </div>
                      <div className="form-group">
                        <label className="col-md-2 control-label">付款时间</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.paymentTime}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">收件人</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {receiverInfo.receiverName}，
                                {receiverInfo.receiverProvince} 
                                {receiverInfo.receiverCity} 
                                {receiverInfo.receiverAddress} 
                                {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
                            </p>
                        </div>
                    </div> 
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单状态</label>
                        <div className="col-md-5">
                           
                                {this.state.orderInfo.statusDesc}
                                <div>
                                {
                                    this.state.orderInfo.status === 20
                                    ?  <Expressage  ch={(searchName, searchKeyword) => 
                             {this.onSendGoods(searchName, searchKeyword)}}/>
                                    : null
                                }
                                </div>
                           
                        </div>
                   </div>
                           <div className="form-group">
                               <label className="col-md-2 control-label">快递单号</label>
                             <div className="col-md-5">

                               <p className="form-control-static">
                                {this.state.orderInfo.expressage}  {this.state.orderInfo.expreNumber} 
                             
                              </p>
                           </div>
                            
                         </div>
                       

                        <div className="form-group">
                               <label className="col-md-2 control-label">运费</label>
                             <div className="col-md-5">

                               <p className="form-control-static">
                                 ￥{this.state.orderInfo.postage} 
                             
                              </p>
                           </div>
                            
                         </div>

                   <div className="form-group">
                               <label className="col-md-2 control-label">备注</label>
                             <div className="col-md-5">

                               <p className="form-control-static">
                                 {this.state.orderInfo.note} 
                             
                              </p>
                           </div>
                            
                         </div>

                     
                    <div className="form-group">
                        <label className="col-md-2 control-label">支付方式</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.paymentTypeDesc}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单总金额</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                ￥{this.state.orderInfo.payment}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品列表</label>
                        <div className="col-md-10">
                            <TableList tableHeads={tableHeads}>
                                {
                                /*   productList就是，前面已经定义表格名字那里 this.state.orderInfo.orderItemVoList*/
                                    productList.map((product, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>

                                                      <a href={`${this.state.orderInfo.imageHost}${product.productImage}`} target="_blank">
                                                    <img className="p-img"  alt={product.productName}
                                                        src={`${this.state.orderInfo.imageHost}${product.productImage}`}/>
                                                        </a>
                                                </td>
                                                <td>{product.productName}</td>
                                                <td>￥{product.currentUnitPrice}</td>
                                                <td>{product.quantity}</td>
                                                <td>￥{product.totalPrice}</td>
                                            </tr>
                                        );
                                    })
                                }
                            </TableList>
                        </div>
                    </div>



                <div className="form-group">
                        <label className="col-md-2 control-label">用户上传的图片</label>
                        <div className="col-md-10">
                            {
     /*   productList就是，前面已经定义表格名字那里 this.state.orderInfo.orderItemVoList*/
                      
                                 productList.map((product, index) => {
                                        return ( 
                                            <div key={index}>
                                                  <br/>
                                                    <br/>
                                                      <br/>
                                                        <br/>
                                                          <br/>
                                               <h3>{product.productName} : </h3>
                                               <br/>
                                                <div>  
                                              {
                                            /*    只有 product.isUpload==0图片上传了的才显示出来 若上传状态为0，但是图片已经被删除，不判断等于50，都会报错，会显示空白*/
                                                    
                                                        product.isUpload==0&&this.state.orderInfo.status!=50?product.imagelist.map(
                                                      (image, index) => (
                                                     <div className="img-con" key={index}>

                                                      <a href={`${this.state.orderInfo.imgUploadHost}${image}`} target="_blank">
                                                          <img className="p-img"  alt={product.productName}
                                                            src={`${this.state.orderInfo.imgUploadHost}${image}`}/>

                                                            </a>
                                                                    </div>
                          
                                                                    )
                                                          ) : (<div>用户还没有上传图片,请确认该订单状态是已付款 才通知用户上传</div>)

                                                      

                                         
                                                  }


                                                </div>
                                                
                                   
                                            </div>

                                        
                                        );
                                })


                            


                            }
                        </div>
                </div>





             </div>
        </div>
        )
    }
}
export default OrderDetail;